<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="include :: header('新增模板')" />
    <th:block th:include="include :: oly_froala_css" />
    <th:block th:include="include :: oly_jsonmate_css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>

<body class="white-bg" th:object="${olyTemplate}">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-template-add">
            <input name="templateId" th:field="*{templateId}" type="hidden">
            <input name="templateUrl" th:field="*{templateUrl}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">父模板：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input id="treeId" name="parentId" type="hidden" th:value="${olyTemplate?.templateId}" />
                        <input class="form-control" type="text" onclick="selectTemplateTree()" id="treeName"
                            readonly="true" th:value="*{templateName}" required>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label is-required">模板类型：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('oly_template_type')}">
                        <input type="radio" th:id="${dict.dictCode}" th:value="${dict.dictValue}" name="templateType"
                            th:field="*{templateType}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">模板名：</label>
                <div class="col-sm-8">
                    <input name="templateName" required class="form-control" type="text">
                </div>
            </div>

            <div class="form-group tOther tr">
                <label class="col-sm-3 control-label">上传模板：</label>
                <div class="col-sm-8">
                    <input name="file" class="form-control" type="file">
                    <br>
                    <input name="templateUrl"  class="form-control" disabled type="text">
                </div>
            </div>


            <div class="form-group tHtml tr">
                <label class="col-sm-3 control-label">模板内容：</label>
                <div class="col-sm-8">
                    <div id="htmlContent">
                       

                    </div>
                </div>
            </div>

            <div class="form-group tHtml tr">
                <label class="col-sm-3 control-label">模板数据：</label>
                <div class="col-sm-8">
                    <input name="templateParam" type="hidden">
                    <div id="templateParam" class="json-editor"></div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">模板状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_show_hide')}">
                        <input type="radio" th:id="${dict.dictCode}" name="visible" th:value="${dict.dictValue}"
                            th:checked="${dict.default}">
                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否内置：</label>
                <div class="col-sm-8"> 
                    <div class="radio-box" >
                        <input type="radio" checked id="tYes" name="built" value="1" th:field="*{built}">
                        <label for="tYes" >是</label>
                    </div>
                    <div class="radio-box" >
                        <input type="radio" id="tNo" name="built" value="0" th:field="*{built}">
                        <label for="tNo" >否</label>
                    </div>     
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">显示顺序：</label>
                <div class="col-sm-8">
                    <input name="orderNum" class="form-control" type="number"  required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">备注：</label>
                <div class="col-sm-8">
                    <input name="remark" class="form-control" type="text">
                </div>
            </div>
            <a class="btn btn-success" onclick="submitHandler()">
                <i class="fa fa-plus"></i> 添加
            </a>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: oly_froala_js" />
    <th:block th:include="include :: oly_jsonmate_js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "oly/template";

    
        $("#form-template-add").validate({
        	onkeyup: false,
        	rules:{
        		templateType:{
        			required:true
        		},
        		templateName:{
                    required:true
        		},
        		orderNum:{
        			digits:true
        		},
        	},
        	messages: {
                "templateName": {
                    remote: "名称不能为空"
                }
            },
            focusCleanup: true
        });

        
        /* 初始化富文本编辑器 */
        var editor = new FroalaEditor("#htmlContent", {
            // Set the language code.
            language: 'zh_cn',
            imageUploadURL: '/articleImg' //上传到本地服务器,返回{'link',url}
        }, function () {
            if ($("input[name='templateType']:checked").val() == 1&& $("input[name='templateUrl']").val().length>10) {
                $.get(prefix + "/getContent", { 'tUrl': $("input[name='templateUrl']").val() }, function (res) {
                    editor.html.set(res);
                });
            }
        });


        function submitHandler() {
            if ($.validate.form()) {
                var data=$('#form-template-add').serializeArray();
                data.push({"name": "templateHtml", "value": editor.html.get(true)});
                $.operate.save(prefix + "/add", data);
            }
        }


        $("input[name='templateType']").on('ifChecked', function (event) {
            changeBox();
        });

        /*olyTemplateType
        0：为目录  目录 目录名 备注 用途
        1：自定义html 多数据
        2：以上需要上传 不支持修改*/
        function changeBox() {
            let tType = $("input[name='templateType']:checked").val();
            $(".tr").show();

            if (tType == 0) {
                $(".tr").hide();
            
            }
            else if (tType == 1) {
                $(".tHtml").show();
                $(".tOther").hide();
            }
            else {
                $(".tHtml").hide();
                $(".tOther").show(); 
            }
        }
        changeBox();
        /*模板模型-新增-选择父树*/
        function selectTemplateTree() {
            var options = {
                title: '模板模型选择',
                width: "380",
                url: prefix + "/selectTemplateTree/" + $("#treeId").val(),
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero) {
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }

        var json = {};
        function updateJSON(data) {
            json = data;

        }
        $('#templateParam').jsonEditor(json, {
            change: updateJSON
        });
        $(document).ready(function () {
            $("input[name='file']").fileinput({
                rtl: true,
                showPreview: false, //是否显示预览
                hideThumbnailContent: true,//是否在缩略图中隐藏预览内容（图像，pdf内容，文本内容等）。
                uploadUrl:prefix+"/templateUpload",
                allowedFileExtensions: ["pdf", "docx",]
            });
            $("input[name='file']").on("fileuploaded", function (event, data, previewId, index) {
                $("input[name='templateUrl']").val(data.response.data.fk);
            })
        });

        
    </script>

</body>

</html>